<template>
  <div>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <!-- 流程名称输入框 -->
      <el-form-item label="流程名称">
        <el-input v-model="queryForm.definitionName" placeholder="请输入流程名称" />
      </el-form-item>
      
      <!-- 课题名称输入框 -->
      <el-form-item label="课题名称">
        <el-input v-model="queryForm.topicName" placeholder="请输入课题名称"  />
      </el-form-item>
        <!-- 节点搜索框 -->
        <el-form-item label="节点">
        <el-input v-model="queryForm.taskName" placeholder="请输入节点"  />
      </el-form-item>
      <!-- 重置按钮 -->
      <el-form-item>
        <el-button type="warning" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list"
    border
    style="width: 100%; min-width: 800px; border-radius: 12px; overflow: hidden; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);"
    :header-cell-style="{ backgroundImage: 'linear-gradient(to right, #f0f9ff, #e5eaff)', color: '#333', fontWeight: 'bold' }"
    :cell-style="{ padding: '12px 8px' }"
    fit
    >
      <el-table-column label="序号" type="index" width="100" />
      <el-table-column label="流程名称" align="center" prop="definitionName" />
      <el-table-column label="课题名称" align="center" prop="topicName" />
      <el-table-column label="开始时间" align="center" prop="startTime" sortable />
      <el-table-column label="结束时间" align="center" prop="endTime" sortable />
      <el-table-column label="当前节点" align="center" prop="taskName" />
      <el-table-column label="状态" align="center" >
        <template #default="scope">
          <span v-if="scope.row.status === 1">进行中</span>
          <span v-if="scope.row.status === 2">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template #default="scope">
          <div class="button-group">
          <el-button link type="primary"  class="btn-delete" icon="Delete" @click="handleDelete(scope.row.id)">删除</el-button>
          <el-button link type="primary"  class="btn-view" @click="handleHistoryRecord(scope.row.id)"><el-icon><More /></el-icon>审批记录</el-button>
        </div>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next"
     v-model:page-size="queryForm.pageSize"
     v-model:current-page="queryForm.pageNo" 
      :total="total" 
      @current-change="getList"
      />
    <StartProcess ref="startProcessRef" @ok="getList" class="centered" />
    <HistoryRecord ref="historyRecordRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import baseService from "@/service/baseService";
// @ts-ignore
import StartProcess from "./model/StartProcess.vue";
// @ts-ignore
import HistoryRecord from "@/components/HistoryRecord/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { debounce } from "lodash-es";

// 查询表单参数
const queryForm = reactive({
  definitionName: "",
  topicName: "",
  taskName: "",
  pageNo: 1,
  pageSize: 10
});
// 列表内容数量
const total = ref(0);
// 列表是否加载
const loading = ref(true);
// 原始数据列表
const list = ref<any[]>([]);

// 课题申请弹出框
const startProcessRef = ref();
// 审批记录弹出框
const historyRecordRef = ref();

/**
 * 获取所有数据
 */
const getList = () => {
  loading.value = true;
  baseService
    .get("/processStart/list", queryForm)
    .then((res) => {
      loading.value = false;
      if (res.code === 200) {
        list.value = res.rows;
        total.value = res.total;
      } else {
        list.value = [];
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

/**
 * 课题申请
 */
function handleAdd() {
  startProcessRef.value.init();
}

/**
 * 审批记录
 * @param instanceId 流程实例id
 */
function handleHistoryRecord(instanceId: string) {
  historyRecordRef.value.open(instanceId);
}

/**
 * 删除按钮操作
 * @param instanceId 流程实例id
 */
function handleDelete(instanceId: any) {
  ElMessageBox.confirm("确认要删除当前项吗?", "提示").then(() => {
    baseService.delete(`/processStart/delete`, instanceId).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        getList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
}


watch(() => queryForm.definitionName, debounce(getList, 500));
watch(() => queryForm.topicName, debounce(getList, 500));
watch(() => queryForm.taskName, debounce(getList, 500));


/**
 * 表单重置
 */
const resetForm = () => {
  queryForm.definitionName = "";
  queryForm.topicName = "";
  queryForm.taskName = "";
  getList();
};

// 页面初始化时获取所有数据
onMounted(() => {
  getList();
});
</script>



<style scoped>
.centered {
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 横向居中 */
  align-items: center; /* 纵向居中 */
  min-height: 100vh; /* 确保有足够的高度以看到居中效果，可根据实际情况调整 */
}
/* 表格整体样式 */
.el-table {
  background-color: #fff;
  font-size: 14px;
  transition: all 0.3s;
}

/* 表头样式 */
.el-table__header-wrapper th {
  background-image: linear-gradient(to right, #f0f9ff, #e5eaff);
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 行悬停效果 */
.el-table .el-table__body-wrapper tr:hover {
  background-color: #f0f9ff;
  transition: background-color 0.2s ease;
}

/* 状态标签样式 */
.tag-danger {
  background-color: #ff6b6b !important;
  color: #fff !important;
  border-radius: 4px;
  font-weight: 500;
}
.tag-active {
  background-color: #4caf50 !important;
  color: #fff !important;
  border-radius: 4px;
  font-weight: 500;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.button-group .el-button {
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 500;
  min-width: 60px;
  transition: all 0.2s;
}
.btn-design {
  background-color: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-activate {
  background-color: #4caf50;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-suspend {
  background-color: #ff9800;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-view {
  background-color: #5c6bc0;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-delete {
  background-color: #e57373;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button-group .el-button:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* 无信息提示样式 */
.empty-info {
  color: #999;
  font-size: 14px;
  text-align: center;
  margin: 0;
  font-weight: 500;
}
</style>
